import React from 'react';

import "../../../scss/lk/Mine_Message.scss"

import { Form, Input, Button, Avatar } from "antd"

import { UserOutlined } from '@ant-design/icons';
import { useEffect, useNavgite } from 'react';
import { useState } from 'react';
import axios from 'axios';
import { useNavigate } from 'react-router-dom';

import { message } from "antd";

function Mine_Message(props) {
    //*获取用户的uesrname
    var [user, setUser] = useState({})
    //*保存用户id
    var [id, setID] = useState({})

    //*结构form
    var { useForm } = Form
    var [form] = useForm()

    var push = useNavigate()

    //*更改密码
    var onFinish = (value) => {
        console.log(id);
        var newvalue = JSON.parse(JSON.stringify(value))
        delete newvalue.password
        axios.patch(`http://localhost:4000/posts/${id}`, { password: newvalue.newpassword }).then((ok) => {
            message.open({ type: 'success', content: '修改成功,请重新登录!' });
            setTimeout(() => {
                push('/login')
            }, 500);
        })
    }

    //*生命周期
    useEffect(() => {
        setUser(JSON.parse(localStorage.getItem("userinfo")))
        setID(JSON.parse(localStorage.getItem("userinfo")).id)
    }, [])
    //*监听
    useEffect(() => {
        console.log(user);
        form.setFieldsValue(user)

    }, [user])

    return (
        <div className='mine_message'>
            <div className="message_top">
                基础信息 / 个人信息
            </div>
            <div className="account_setting">
                更改密码
            </div>
            <div className="center">
                <div className="box">
                    <div className="img">
                        <Avatar size={84} icon={<UserOutlined />} />

                    </div>
                    <Form
                        // wrapperCol={{ span: 80 }}

                        labelCol={{
                            span: 6,
                          }}
                          wrapperCol={{
                            span:14,
                          }}
                        onFinish={onFinish}
                        form={form}
                    >
                        <Form.Item
                            name="username"
                            label="用户名"
                            rules={[{ required: true, message: '请输入用户名' }]}
                        >
                            <Input placeholder='请输入用户名' disabled={true} />
                        </Form.Item>
                        <Form.Item
                            name="username"
                            label="手机号"
                            rules={[{ required: true, message: '请输入手机号' }]}
                        >
                            <Input placeholder='请输入密码' disabled={true} />
                        </Form.Item>
                        <Form.Item
                            name="password"
                            label="旧密码"
                            rules={[{ required: true, message: '请输旧密码' }]}
                        >
                            <Input placeholder='请输入密码' disabled={true} />
                        </Form.Item>
                        <Form.Item
                            name="newpassword"
                            label="新密码"
                            rules={[{ required: true, message: '请输入新密码' }]}
                        >
                            <Input placeholder='请输入密码' />
                        </Form.Item>

                        <Form.Item wrapperCol={{ offset: 6, span: 14 }}>
                            <Button type="primary" htmlType="submit">
                                确定
                            </Button>
                        </Form.Item>
                    </Form>
                </div>
            </div>
        </div>
    );
}

export default Mine_Message;